- EduLearn HTML5 Template Documentation for version 1.0 by CowThemes
This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.
Thank you for purchasing our product! We are very glad that you have decided on our HTML Template.
The Template is very easy to use and we are here to guide and help you, so please read and follow the instructions and if you have further questions write us a email cowthemes42@gmail.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built write us a email.
Edulearn is a Template for all your needs and it has a lot of features like animations, countdowns and more.
It has 11 Pages:
A screen of the Home Page:
All the template elements like the Testimonial, event, services, skills etc. are all separated DIV-s inner pages as well as that can be used on any page you want.
The template includes javascripts files:
The site is made of many sections like header, slider, testimonials, services and more...
As example we have the slider section, the code below:
And this is how it look live:
And a info section, if you want to change anything here its easy to modify it:
And this is how it look live:
The same thing is with all sections, Services, Our Works, How We Work, Statistics Section etc.. they are all in a section or a div="TYPE-SECTION".
This template has been implemented as a responsive layout. The full width of the template is fluid for screen mode, and it still has a boxed version.
The CSS file is located in the css folder. The css file is registered and included in the "head"..."/head".
CSS file is very good structured and arranged so you can search very easy:
==============================================================
Navigation Wrap Style
==============================================================
*/
.logo_nav_outer_wrap{
float:left;
width:100%;
position:relative;
padding:30px 0px;
}
.main_navigation{
float:right;
width:auto;
}
.main_navigation ul{
float:left;
width:100%;
}
.main_navigation ul li{
position:relative;
display:inline-block;
font-family: 'Montserrat', sans-serif;
}
.main_navigation ul li a{
display:block;
text-transform:uppercase;
padding:0px 20px;
font-weight:700;
font-size:14px;
}
.main_navigation ul li a span{
display:block;
font-size:10px;
line-height:normal;
font-weight:300;
}
/*2nd ul*/
.main_navigation ul ul{
position:absolute;
top:135%;
left:0px;
width:200px;
z-index:1000;
background-color:#fff;
opacity:0;
visibility:hidden;
}
.main_navigation ul ul li{
width:100%;
padding:10px 10px;
}
.main_navigation ul ul li a{
font-weight:300;
font-size:12px;
}
.main_navigation ul ul ul{
position:absolute;
top:0px;
left:100%;
}
.main_navigation ul > li:hover > ul{
opacity:1;
visibility:visible;
}
/*
==============================================================
Search Wrap Style
==============================================================
*/
.top_search_wrap{
float:right;
width:auto;
padding:5px 25px;
cursor:pointer;
position:relative;
}
.top_search_wrap i{
font-size:16px;
}
.search-wrapper-area{
position:absolute;
right:0px;
top:50px;
background:#fff;
padding:10px 20px;
display:none;
z-index:20;
}
.search-area{
position:relative;
}
.search-area input[type="text"]{
float:left;
border:1px solid #ccc;
height:40px;
padding:5px 15px;
}
.search-area input[type="submit"]{
float:left;
position:absolute;
right:0px;
padding:10px;
border:none;
background:#ccc;
color:#fff;
}
/*
==============================================================
Cart Wrap Style
==============================================================
*/
.top_cart_wrap{
float:right;
width:auto;
padding:5px 0px 5px 20px;
}
.top_cart_wrap i{
font-size:16px;
}
/*
==============================================================
Banner Wrap Style
==============================================================
*/
.banner_outer_wrap{
float:left;
width:100%;
position:relative;
}
.banner_outer_wrap ul{
width:100%;
float:left;
}
.banner_outer_wrap ul li{
position:relative;
width:100%;
float:left;
}
/*.banner_outer_wrap ul li:before{
content:"";
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.5);
}*/
.banner_outer_wrap ul li img{
width:100%;
height:auto;
}
.ct_banner_caption{
position:absolute;
left:50%;
top:50%;
margin:-180px 0 0 -550px;
width:550px;
font-family: 'Roboto', sans-serif;
}
.ct_banner_caption h4{
background-color:#ffffff;
margin:0px 0px 8px;
color:#999999;
display:inline-block;
text-transform:uppercase;
padding:7px 15px 5px 10px;
font-size:20px;
font-weight:200;
}
.ct_banner_caption h4 > span{
display:inline-block;
font-weight:bold;
}
.ct_banner_caption > span{
display:inline-block;
background-color:#929292;
color:#fff;
text-transform:uppercase;
padding:3px 20px 3px 10px;
font-size:20px;
font-weight:300;
margin:0px 0px 10px;
}
.ct_banner_caption h2{
font-weight:600;
color:#666666;
font-size:45px;
text-transform:uppercase;
margin:0px 0px 5px;
}
.ct_banner_caption p{
color:#666666;
font-weight:300;
font-size:18px;
margin:0px 0px 20px;
}
.ct_banner_caption > a{
display:inline-block;
min-width:150px;
text-align:center;
border:1px solid;
color:#666666;
text-transform:uppercase;
padding:8px 0px;
margin:0px 10px 0px 0px;
font-weight:300;
font-size:14px;
}
.ct_banner_caption > a.active,
.ct_banner_caption > a:hover{
color:#fff;
}
I've used the following images, icons, fonts or other files as listed.
Fonts used:
Thank you so much for choosing "Edulearn" we hope you will enjoy using it!